import lessModule from "./index.module.less"
import lastImage from "../../../../../../../../../../assets/image/panoramicMonitoringPage-last.png"
import nextImage from "../../../../../../../../../../assets/image/panoramicMonitoringPage-next.png"
import { useEffect, useRef, useState } from "react"
import { $eventBus, $EventBus_off, $EventBus_on } from "../../../../../../../../../../common/utils"
import { Slider } from "antd"
import dayjs from "dayjs"
// 主页-全景监控页面-浮层组件-时间轴组件-进度条组件
interface homePagePanoramicMonitoringPageLayerComponentTimeAxisComponentProgressComponentComponentInterface {
    isShow: boolean
    isPlaying: boolean
    isNew: boolean
    change_isNew: Function
}
const HomePage_PanoramicMonitoringPage_LayerComponent_TimeAxisComponent_ProgressComponent: React.FC<homePagePanoramicMonitoringPageLayerComponentTimeAxisComponentProgressComponentComponentInterface> = (props) => {
    const total = 60 * 60 * 24
    let [sliderValue, setSliderValue] = useState<number>((dayjs().valueOf() - dayjs().startOf("day").valueOf()) / 1000)
    let [startTimeStamp, setStartTimeStamp] = useState<number>(dayjs().startOf("day").valueOf())
    const playIntervalRef = useRef<NodeJS.Timeout | null>(null);
    // 广播函数数据
    const eventBusFuncData = {
        // 日期框组件的值
        rangeDate: (data) => {
            startTimeStamp = data["data"]["date"].startOf("day").valueOf()
            setStartTimeStamp(startTimeStamp)
            setSliderValue((dayjs(data["data"]["date"]).valueOf() - startTimeStamp) / 1000)
        }
    }

    const emit_timeStamp = (value: number) => {
        setTimeout(() => {
            $eventBus.emit("timeStamp", { source: "HomePage_PanoramicMonitoringPage_LayerComponent_TimeAxisComponent_ProgressComponent", explain: "已更改时间值，请同步至日期选择框！", data: { timeAxisValue: startTimeStamp + value * 1000 } })
        });
    }
    const emit_mapOverlayFilter = (value: number) => {
        emit_timeStamp(value)
        setTimeout(() => {
            $eventBus.emit("mapOverlayFilter", { source: "HomePage_PanoramicMonitoringPage_LayerComponent_TimeAxisComponent_ProgressComponent", explain: "已发送时间值，请进行地图覆盖物的筛选或同步至日期选择框！", data: { timeAxisValue: startTimeStamp + value * 1000 } })
        });
    }

    const change_slider = (value: number) => {
        clear_interval()
        sliderValue = value
        emit_timeStamp(value)
        setSliderValue(sliderValue)
    }
    const afterChange_slider = () => {
        emit_mapOverlayFilter(sliderValue)
        interval_play()

    }
    const click_count = (value: string) => {
        const step = 60 * 30
        switch (value) {
            case "plus":
                sliderValue += step
                sliderValue >= total && setStartTimeStamp(dayjs(startTimeStamp).add(1, 'day').startOf('day').valueOf())
                setSliderValue(sliderValue % total)

                break;
            case "reduce":
                sliderValue -= step
                if (sliderValue < 0) {
                    setStartTimeStamp(dayjs(startTimeStamp).subtract(1, 'day').startOf('day').valueOf())
                    setSliderValue(sliderValue + total)
                } else {
                    setSliderValue(sliderValue)
                }
                break;
        }
        emit_mapOverlayFilter(sliderValue)
        interval_play()
    }

    const interval_play = () => {
        clear_interval()
        if (props.isPlaying) {
            playIntervalRef.current = setInterval(() => {
                sliderValue += 1
                sliderValue >= total && setStartTimeStamp(dayjs(startTimeStamp).add(1, 'day').startOf('day').valueOf())
                emit_mapOverlayFilter(sliderValue % total)
                setSliderValue(sliderValue % total)
            }, 1000)
        }
    }

    const change_isNew = () => {
        if (props.isNew) {
            startTimeStamp = dayjs().startOf("day").valueOf()
            sliderValue = (dayjs().valueOf() - startTimeStamp) / 1000
            setStartTimeStamp(startTimeStamp)
            setSliderValue(sliderValue)
            emit_mapOverlayFilter(sliderValue)
            interval_play()
        }
        props.change_isNew()
    }

    const clear_interval = () => {
        playIntervalRef.current && clearInterval(playIntervalRef.current)
    }

    useEffect(() => {
        interval_play()
        return () => {
            clear_interval()
        }

    }, [props.isPlaying])

    useEffect(() => {
        change_isNew()
    }, [props.isNew])
    useEffect(() => {
        $EventBus_on(eventBusFuncData)
        // 销毁
        return () => {
            $EventBus_off(eventBusFuncData)

        }
    }, [])
    return (
        <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentTimeAxisComponentProgressComponent"]} >
            <img className="homePage-handleImage" src={lastImage} onClick={() => click_count("reduce")} />
            <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentTimeAxisComponentProgressComponent-content"]}>
                {
                    props.isShow && <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentTimeAxisComponentProgressComponent-content__tooltip"]} style={{ left: `calc(${sliderValue / total * 100}% - 32px)` }}>{dayjs(startTimeStamp + sliderValue * 1000).format("HH:mm:ss")}</div>
                }
                <Slider tooltip={{ open: false }} min={0} max={total - 1} value={sliderValue} onChange={change_slider} onAfterChange={afterChange_slider} />
                <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentTimeAxisComponentProgressComponent-content__axis"]}>
                    {
                        Array.from({ length: 24 }, (_, i) => `${i < 10 ? "0" : ""}${i}`).map((item, idx) => {
                            return (
                                <div key={`item${idx}`} className={lessModule["content-axis__scale"]}>
                                    <div className={lessModule["axis-scale__line"]}></div>
                                    <span className={lessModule["axis-scale__value"]}>{item}:00</span>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
            <img className="homePage-handleImage" src={nextImage} onClick={() => click_count("plus")} />
        </div>
    )
}


export default HomePage_PanoramicMonitoringPage_LayerComponent_TimeAxisComponent_ProgressComponent